<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css' rel='stylesheet'/>
    <link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'>
    <link rel="stylesheet" href="../bootstrap/bootstrap.css">
    <link rel="stylesheet" href="dist/1.css">
    <title>后盾人顶部导航适配</title>
</head>
<body>
    <div class="border-bottom border-success border-5">
        <div class="container">
            <div class="navbar">
                <input type="checkbox" name="" id="dropdown-menu" hidden>
                <div class="logo">
                    <i class="fa fa-code" aria-hidden="true"></i>
                    <span>houdunren.com</span>
                </div>
                <nav>
                    <a href="#">系统学习</a>
                    <a href="#">实战课程</a>
                    <a href="#">最近更新</a>
                    <a href="#">话题讨论</a>
                    <a href="#">签到打卡</a>
                    <a href="#">订阅会员</a>
                    <a href="#">在线文档</a>
                    <a href="#">训练营</a>
                    <a href="#">直播间</a>
                </nav>
                <div class="member">
                    <div class="message">
                        <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        <span>188</span>
                    </div>
                    <div class="user">
                        <img src="images/timg.jpeg" alt="">
                        <div class="icon">
                            <label for="toggle-menu">
                                <span>ximeidada</span>
                                <i class="fa fa-arrow-down" aria-hidden="true"></i>
                            </label>
                        </div>
                        <input type="checkbox" id="toggle-menu" hidden>
                        <nav>
                            <a href="#">修改资料</a>
                            <a href="#">头像设置</a>
                            <a href="#">修改密码</a>
                            <hr>
                            <a href="#">我的帖子</a>
                            <a href="#">会员周期</a>
                            <a href="#">站内消息</a>
                            <hr>
                            <a href="#">我的主页</a>
                            <hr>
                            <a href="#">退出登录</a>
                        </nav>
                    </div>
                </div>
                <div class="toggle-icon">
                    <label for="dropdown-menu">
                    <i class="fa fa-map" aria-hidden="true"></i>
                </label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>